---
title: Guidelines
redirect_from:
  - /components/notificationbadge/
---

<ReactExample exampleId="NotificationBadge-default" />

## When to use

- To show how many notifications a user has.
- To show simple information that doesn't require interaction (such as the type of transport).

## When not to use

- For anything longer than a very short number or one icon---use a [badge](/components/information/badge/).
- To include an action---use a [button](/components/action/button/)
  (a circled button has a similar look with an action).

## Component status

<ComponentStatus component="NotificationBadge" />

## Content structure

![Type: visually supports the message with different styles for different types; icon: optionally represent the notification visually and isn't an action; content: displays the number of the notification and doesn't display if an icon is used.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:119%3A1159)

## Content

### Limit content

Notification badges are very small and circular.
This means they can't hold much content.
Use only an icon or a number no more than 2 digits.

### Include nonvisual info

When you're using only an icon for the notification badge,
make sure to include the same information nonvisually
so even people who don't see the icon [get the same message](/foundation/accessibility/).

<ReactExample exampleId="NotificationBadge-accessibility" />

## Look & feel

### Choose type based on urgency

We have two types of notification badges with different backgrounds:
info (<InlineToken name="paletteBlueLight" alternateName />)
and critical (<InlineToken name="paletteRedLight" alternateName />).
They each express a different feel,
so choose a color based on how urgent the notification is.

- Info: Subtle, useful for counters.
  Use when you just want to show users that there is something to see
  but action isn’t necessary (such as a wish list).
- Critical: Grabs attention.
  Use when the notification requires real action from the user.

<ReactExample exampleId="NotificationBadge-types" />
